import { animation_obj } from '../../../Css/Classes/cla_animation_obj';
import {
  inject_remove_duration,
  inject_remove_timing_func,
} from '../../../DataDefine/sourceData';
import { Multiply_act } from '../../appear_dom/DataDefine/sourceData';
import { getElementViewOffsetPosi } from '../../getElementViewOffsetPosi';
import { inject_dom_dataMana } from '../../inject_dom/Classes/cla_inject_dom_dataMana';
import { remove_class } from '../../remove_class';

const reback_dom_operateTag = 'reback_dom_operate';

/**
 * 移入 动画 元素 从右 进入
 */
export class reback_dom_operate extends inject_dom_dataMana {
  get [Symbol.toStringTag]() {
    return reback_dom_operateTag;
  }

  constructor(elt: HTMLElement) {
    super(elt);
  }

  setstaticCss() {
    remove_class(this.targetEl, 'disnone');

    let curEl_posi = getElementViewOffsetPosi(this.targetEl);
    // remove_class(this.targetEl, 'disnone', true);

    // 最大 长度
    let maxWidth = curEl_posi.width;

    // 最大 高度
    let maxHeight = curEl_posi.height;

    let Multiply_act_direct = Multiply_act[this.direct];

    let cur_animation_obj = new animation_obj();

    cur_animation_obj.duration = inject_remove_duration;

    cur_animation_obj.timing_function = inject_remove_timing_func;

    cur_animation_obj.name = this.reback_dom_anima_cla;

    let ret = `
     .${cur_animation_obj.name} {
         ${cur_animation_obj.toCssString()}

        box-sizing: border-box;

        animation-name: ${cur_animation_obj.keyframeName} , 
        ${cur_animation_obj.name}_mar_top_keyframe        ,
        ${cur_animation_obj.name}_opacity                 ,
        ${cur_animation_obj.name}_font_size               ,
        ${cur_animation_obj.keyframeName}_inject_dom;
    }

      @keyframes ${cur_animation_obj.keyframeName}{
        0%{
            width: ${Multiply_act_direct[0] * maxWidth}px;
            height: ${Multiply_act_direct[1] * maxHeight}px;
        }
        100%{
            width: ${maxWidth}px;
            height: ${maxHeight}px;
        }
      }
      
      @keyframes ${cur_animation_obj.name}_mar_top_keyframe{    
          0%{
              margin: 0;
              padding: 0;
          }
      }
          
      @keyframes ${cur_animation_obj.name}_opacity {   
          0%{
              opacity: 0;
          }
          60%{
              opacity: 0;
          }
      }

      @keyframes ${cur_animation_obj.name}_font_size {   
          0%{
              font-size: 0px;
          }    
          40%{
              font-size: 0px;
          }
      }
       @keyframes ${cur_animation_obj.keyframeName}_inject_dom {
         0%{
            transform: translate(calc(-${maxWidth}px - 30px));
         }

         60%{
            transform: translate(calc(-${maxWidth}px - 30px));
         }
      }
       `;

    return ret;
  }
}
